import React from "react";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { Modal } from "antd-mobile";
import style from "../../css/secuityCenter/ChangePassword.module.css";
import { useState } from "react";
import { useEffect } from "react";
import { getEdit } from "../../api/index";
export default function ChangePassword() {
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  };
  // 用户id
  const [id, setId] = useState("");
  //
  const [red, setRed] = useState(false);
  // 是否匹配
  const [pasfang, setPasfang] = useState(false);
  // 新密码匹配
  const [paw, setPaw] = useState(false);
  // 原密码
  const [password, setPassword] = useState("");
  const [xinpas, setXinpas] = useState("");
  useEffect(() => {
    let user = JSON.parse(localStorage.getItem("user"));
    setPassword(user.password);
    setId(user.id);
  }, []);
  return (
    <>
      <NavBar onBack={back}>修改密码</NavBar>
      <div className={style.dabox}>
        <div className={style.Inputbox}>
          <p>请输入当前登陆密码</p>
          <input
            type="text"
            placeholder="请输入当前登录密码"
            onChange={(e) => {
              if (e.target.value == password) {
                setPasfang(true);
              }else{
                setPasfang(false);
              }
            }}
          />
        </div>
        {!pasfang ? (
          <div
            className={red ? style.red : ""}
            style={{
              width: "95%",
              padding: "2.5%",
              color: "#999",
              backgroundColor: "#F2F3F7",
              fontSize: "14px",
            }}
          >
            密码输入不匹配
          </div>
        ) : (
          ""
        )}
        <div className={style.Inputbox}>
          <p>确认新密码</p>
          <input
            type="text"
            placeholder="确认新密码"
            onChange={(e) => {
              let reg = new RegExp("^(?=.*[A-Za-z])(?=.*d|[^ws]).{6,20}$");
              if (reg.test(e.target.value)) {
                setPaw(true);
                setXinpas(e.target.value);
              } else {
                setPaw(false);
              }
            }}
          />
        </div>
        {!paw ? (
          <div
            className={red ? style.red : ""}
            style={{
              width: "95%",
              padding: "2.5%",
              color: "#999",
              backgroundColor: "#F2F3F7",
              fontSize: "14px",
            }}
          >
            必须是6-20个英文字母、数字或符号(除空格),且字母、数字和标点符号至少包含两种
          </div>
        ) : (
          ""
        )}
        <button
          className={style.querbtn}
          onClick={() => {
            if (pasfang && paw) {
              setRed(false);
              console.log(xinpas);
              getEdit({ id: id, password: xinpas }).then((res) => {
                if (res.code == 200) {
                  Modal.alert({
                    content: "修改完成",
                    onConfirm: () => {
                      localStorage.removeItem("token");
                      localStorage.removeItem("user");
                      navigate("/login/get");
                    },
                  });
                }
              });
            } else {
              setRed(true);
            }
          }}
        >
          确认
        </button>
      </div>
    </>
  );
}
